import { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { increment, decrement, addToNum } from './store/modules/counterStore'
import { getList } from './store/modules/channelStore' 
function App() {
  const { count } = useSelector((state) => state.counter)
  const {channelList}=useSelector(state=>state.channel)

  const dispatch = useDispatch()
  useEffect(()=>{
    dispatch(getList())
  },[dispatch])
  return (
    <div className="App">
         <ul>
        {channelList.map((item) => {
          return <li key={item.id}>{item.name}</li>
        })}
      </ul>
      <div>
        <button onClick={() => dispatch(decrement())}>-</button>
      </div>
      {count}
      <div>
        <button onClick={() => dispatch(increment())}>+</button>
      </div>
      <div>
        <button onClick={() => dispatch(addToNum(10))}>addTo10</button>
      </div>
      <div>
        <button onClick={() => dispatch(addToNum(20))}>addTo20</button>
      </div>
    </div>
  )
}
export default App
